<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">



</head>
<body>
<jsp:include page="${APP_PATH}/common/head-home.jsp"/>

<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="bg-white rounded my-2 p-4">
        <div class="border-bottom border-dark"><h4>本周优质文章和精彩问答推荐</h4></div>
        <p class="mb-0">以下是系统自动根据您的浏览轨迹为您推荐的优质文章和精彩问答。</p>
        <p class="mb-0">本网站还提供了邮件订阅服务，如果您需要定期获取周推荐提醒，请点击<a href="javascript:void(0);" id="subscribeBtn" class="text-info">订阅</a></p>
    </div>

    <div id="subscribeDiv" style="display: none;" class="bg-white rounded my-2 p-2">
        <div class="form-group">
            <label for="week">请选择邮件发送时间：</label>
            <select name="week" id="week" class="form-control col-3 col-md-3 col-lg-3 col-xl-3 d-inline">
                <option value="1">周一</option>
                <option value="2">周二</option>
                <option value="3">周三</option>
                <option value="4">周四</option>
                <option value="5">周五</option>
                <option value="6">周六</option>
                <option value="7">周日</option>
            </select>
            <a id="submitBtn" class="btn btn-sm bg-primary text-white d-inline ml-2">订阅</a>
        </div>
    </div>

    <div class="rounded my-2">
        <div id="card-columns" class="card-columns">

        </div>
    </div>
</div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>

    $("#subscribeBtn").click(function () {
        //点击订阅按钮
        $("#subscribeDiv").show();
    });

    $("#submitBtn").click(function () {
        var week = $("#week").val();
        $.ajax({
            url:'/saveSubscribe/'+week,
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    toastr.success("订阅成功！");
                }else{
                    toastr.error(result.extend.error);
                }
            }
        });
    });

    $(function () {
        //发送异步请求，获取推荐内容
        $.ajax({
            url: '/getRecommendation',
            type: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    if (result.extend.hashMap) {
                        $.each(result.extend.hashMap,function (index, item) {
                            if (item.title) {
                                var div_card = $("<div class='card'></div>");
                                var div_body = $("<div class='card-body'></div>");
                                var h5 ;
                                if (item.type === 1) {
                                    //blog
                                    h5= $("<h5 class='card-title'><a href='/blog/"+item.id+"' class='text-info' >"+item.title+"</a></h5>");
                                }else {
                                    //question
                                    h5= $("<h5 class='card-title'><a href='/question/"+item.id+"' class='text-info' >"+item.title+"</a></h5>");
                                }
                                var p = $("<p class='card-text'>"+item.content.substr(0,200)+"</p>");
                                div_card.append(div_body.append(h5).append(p)).appendTo($("#card-columns"));
                            }
                        })
                    }else{
                        toastr.info("暂时没有推荐内容！");
                    }
                }else{
                    toastr.error("获取推荐内容失败，请重新登陆！");
                }
            }
        });
    });


</script>

</body>

</html>
